{extend name='/public/base' /}

{block name='content'}
<div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="white-space: nowrap">用户名/id/手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="so" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <table class="layui-hide" id="table" lay-filter="table"></table>
    </div>
</div>

<form id="form" class="layui-form" style="display: none" lay-filter="form">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="number" name="age" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="number" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="imgTpl">
    <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>
</script>

<script type="text/html" id="table-useradmin-webuser">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>
{/block}

{block name='js'}
<script>
    layui.use(['table', 'form'], function () {
        let $ = layui.$,
            form = layui.form,
            table = layui.table,
            TableData = table.render({
                elem: '#table',
                toolbar: '#toolbarDemo',
                page: true,
                method: 'post',
                limit: 15,
                limits: [15, 50, 200, 600, 1000, 1800, 3000],
                url: '/manage/user/getList',
                title: '用户数据表',
                cols: [[ //表头
                    {field: 'id', type: 'checkbox', align: 'center'},
                    {field: 'id', title: '用户id', align: 'center'},
                    {field: 'name', title: '名称', align: 'center'},
                    {field: 'age', title: '年龄', align: 'center'},
                    {field: 'phone', title: '手机号', align: 'center'},
                    {field: 'createTime', title: '注册时间', align: 'center'},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150},
                ]]
            });

        //监听搜索
        form.on('submit(search)', function (data) {
            let field = data.field;
            //执行重载
            table.reload('LAY-user-manage', {
                where: field
            });
        });

        //添加
        function addData() {
            layer.open({
                type: 1,
                title: '添加用户',
                content: $("#form"),
                area: ['500px', '450px'],
                btn: ['确定', '取消'],
                btn1: function (index, layero) {
                    let data = form.val('form');
                    $.ajax({
                        method: 'post',
                        data: data,
                        dataType: 'json',
                        url: '/manage/user/add',
                        success: function (res) {
                            if (res.code !== 0) {
                                layer.msg(res.msg);
                            } else {
                                layer.msg('添加成功');
                                layer.close(index);
                                table.reload(TableData);
                            }
                        },
                        error: function (res) {

                        }
                    })
                }
                , btn2: function (index, layero) {
                    $('#form')[0].reset();
                    layer.close(index);
                    return false;
                }
            });
        }

        //修改
        function editData() {
            layer.open({
                type: 1
                , title: '修改用户信息'
                , content: $("#form")
                , area: ['500px', '450px']
                , btn: ['确定', '取消']
                , btn1: function (index, layero) {
                    let data = $('#form').serializeArray();
                    $.ajax({
                        method: 'post',
                        data: data,
                        dataType: 'json',
                        url: '/manage/user/update',
                        success: function (res) {
                            if (res.code != 0) {
                                layer.msg(res.msg);
                            } else {
                                obj.update({
                                    name: data[0].value,
                                    age: data[1].value,
                                    phone: data[2].value,
                                });
                                layer.msg('修改成功');
                                layer.close(index);
                            }
                        },
                        error: function (res) {
                            layer.msg('请求失败，请联系管理员');
                        }
                    })
                }
                , btn2: function (index, layero) {
                    $('#form')[0].reset();
                    layer.close(index);
                    return false;
                }
            })
        }

        //删除
        function delData(arr) {
            layer.confirm('确定删除吗？', function (index) {
                $.ajax({
                    method: 'post',
                    data: arr,
                    dataType: 'json',
                    url: '/manage/user/delete',
                    success: function (res) {
                        // TableData.reload();
                        // layer.msg('已删除');
                    },
                    error: function (res) {

                    }
                });

            });
        }
    });
</script>
{/block}